<template>
    <div class="sifter-box flex-row-center" v-if="isEdit==0">
        <el-form :inline="true" :model="sifterForm" class="demo-form-inline">
            <el-form-item label="筛选：">
                <el-input v-model="sifterForm.key" placeholder="输入活动关键字" @input="proxy.$utils.debounce(updalist,sifterForm)"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="sifterForm.time" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="small" @change="datePickerChange"></el-date-picker>
            </el-form-item>
        </el-form>
        <div>
        </div>
    </div>
    <div class="listDiv" v-if="isEdit==0">
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="title" label="活动名称" width="180" fixed> </el-table-column>
            <el-table-column prop="starttime" label="开始时间" width="110">
                <template #default="props">
                    <span>{{props.row.starttime.substring(0,10)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="endtime" label="结束时间" width="110">
                <template #default="props">
                    <span>{{props.row.endtime.substring(0,10)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地点" width="300"> </el-table-column>
            <el-table-column prop="signCompanyCou" label="公司预约"> </el-table-column>
            <el-table-column prop="signCou" label="总预约数"> </el-table-column>
            <el-table-column prop="msg" label="活动详情" width="100" fixed="right">
                <template #default="props">
                    <span class="pointer mr10 base-color" @click="editData(props.row,3)">查看详情</span>
                </template>
            </el-table-column>
            <el-table-column prop="msg" label="预约情况" width="100" fixed="right">
                <template #default="props">
                    <span class="pointer mr10 base-color" @click="editData(props.row,4)">查看预约</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

    <div class="edit-box" v-if="isEdit!=0">
        <div class="title-box flex-row-center">
            <span class="pointer return flex-row-center mr10" @click="re_turn"><el-icon><back /></el-icon></span>
            <span v-if="isEdit==3">活动详情</span>
            <span v-if="isEdit==4">{{form.title}}预约情况</span>
        </div>
        <div class="form-box">
            <div v-if="isEdit==3" class="">
                <span class="head-title mb10">{{form.title||''}}</span>
                <div class="flex-row-center ju-flex-start mt10 mb10">
                    <span class="base-size mr20"><span class=" base-gray-size">地点：</span>{{form.address||""}}</span>
                    <span class="base-size mr20"><span class=" base-gray-size">开始时间：</span>{{form.starttime||""}}</span>
                    <span class="base-size mr20"><span class=" base-gray-size">结束时间：</span>{{form.endtime||""}}</span>
                </div>
                <div class="line mt10 mb10"></div>
                <div v-html="form.msg"></div>
            </div>
            <div v-if="isEdit==4" class="">
                <el-table :data="sign_list" stripe style="width: 100%">
                    <el-table-column prop="name" label="姓名"> </el-table-column>
                    <el-table-column prop="mobile" label="联系电话"> </el-table-column>
                    <el-table-column prop="department" label="所属部门"> </el-table-column>
                    <el-table-column prop="intime" label="预约提交时间"> </el-table-column>
                </el-table>
                <div class="pd20 w100 flex-row-center ju-flex-end">
                    <el-pagination
                        v-model:currentPage="sign_sifterForm.currentpage"
                        v-model:page-size="sign_sifterForm.pagesize"
                        :page-sizes="[10, 20, 50, 100]" :total="sign_total"
                        @size-change="()=>{sign_updalist()}"
                        @current-change="()=>{sign_updalist()}"
                        layout="total, sizes, prev, pager, next, jumper"  background/>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw } from 'vue'
    import { Back,Edit,Delete } from '@element-plus/icons-vue'
    import Editer from '../../components/editer.vue'
    import upfileSingle from '../../components/upfile_single.vue'

    let { proxy } = getCurrentInstance()
    let obj = reactive({
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            "key":"",
            "time": '',
            "starttime":"",
            "endtime":"",
            currentpage: 1,
            pagesize: 10
        },

        form: {},

        sign_total: 0,
        sign_list:[],
        sign_sifterForm: {
            "activity_id":"",
            currentpage: 1,
            pagesize: 10
        },
    });

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'life/activity/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const datePickerChange = (e)=>{
        if(e&&e.length==2){
            sifterForm.value.starttime = e[0]
            sifterForm.value.endtime = e[1]
            updalist(obj.sifterForm)
        }
    }

    const re_turn = ()=>{
        isEdit.value = 0;
    }


    const editData = (item,isEditidx)=>{
        console.log(item);
        if(isEditidx==4){
            sign_sifterForm.value.activity_id = item.activity_id
            sign_updalist(item)
        }
        form.value = {
            ...item,
        }
        isEdit.value = isEditidx
    }

    const sign_updalist = (form)=>{
        let param = {
            ...sign_sifterForm.value,
        }
        proxy.$ajax({url: 'life/activity/sign/list',data:param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                sign_total.value = d.msg.count||0
                sign_list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    
    let { list, sifterForm, isEdit, form, total,sign_sifterForm,sign_total,sign_list } = toRefs(obj)
</script>

<style lang="scss" scoped>
</style>